// copied from select-dropdown styles
$option-height: 40;
$side-margin: 16;

.editor-publish-date {
	height: 43px;
}

.editor-publish-date__wrapper {
	background: var( --color-surface );
	border: 1px solid var( --color-neutral-10 );
	border-width: 1px;
	border-radius: 2px;
	box-sizing: border-box;
	margin: 0;
	position: relative;
	transition: all 0.15s ease-in-out;
	width: 100%;

	.editor-publish-date.is-open & {
		z-index: z-index( 'root', '.editor-publish-date.is-open .editor-publish-date__wrapper' );
	}
}

.editor-publish-date__header {
	padding: 0 36px 0 16px;
	height: #{$option-height}px;
	line-height: #{$option-height}px;

	color: var( --color-neutral-70 );
	font-size: $font-body-small;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;

	.gridicon.editor-publish-date__header-icon {
		margin-right: #{( $side-margin / 2 )}px;
		vertical-align: text-bottom;
	}

	&.is-scheduled,
	&.is-back-dated,
	&.is-published {
		color: var( --color-primary );
	}

	.editor-publish-date.is-open & {
		border-radius: 2px 2px 0 0;
		box-shadow: none;
		background-color: var( --color-neutral-0 );
	}

	// Chevron
	.gridicon.editor-publish-date__header-chevron {
		fill: var( --color-neutral-50 );
		position: absolute;
		top: 11px;
		right: 16px;
		vertical-align: text-bottom;
		transition: transform 0.15s cubic-bezier( 0.175, 0.885, 0.32, 1.275 );

		.editor-publish-date.is-open & {
			transform: rotate( 180deg );
		}
	}

	&.is-scheduled {
		.editor-publish-date__header-icon,
		.editor-publish-date__header-description {
			color: var( --color-primary );
		}
	}
}

.editor-publish-date__header-wrapper {
	vertical-align: text-top;
	display: inline-block;
	line-height: #{$option-height}px;
	height: #{$option-height}px;
}

.editor-publish-date__header-description {
	position: absolute;
	top: 0;
	line-height: 40px;

	.editor-publish-date__header.is-scheduled &,
	.editor-publish-date__header.is-back-dated &,
	.editor-publish-date__header.is-published & {
		top: 6px;
		font-size: $font-body-extra-small;
		line-height: 12px;
	}
}

.editor-publish-date__immediate.button {
	margin: 4px auto 0;
	display: block;
	color: var( --color-primary );
	font-weight: normal;

	&:hover,
	&:focus,
	&:active {
		color: var( --color-link-dark );
	}
}

.editor-publish-date__choose-header {
	text-align: center;
	margin: 4px auto 0;
	font-size: $font-body-small;
	line-height: 21px;
	padding-top: 7px;
	padding-bottom: 9px;
}

.editor-publish-date__header-chrono {
	position: absolute;
	top: 16px;
	font-size: $font-body-extra-small;
	line-height: 18px;
	color: var( --color-neutral-70 );
}

.editor-publish-date__schedule {
	overflow-y: auto;
	position: static;
	border-top: 1px solid var( --color-neutral-10 );
	padding: 0 10px;

	&.is-scheduled {
		.DayPicker-Day.DayPicker-Day--is-selected > .date-picker__day {
			background-color: var( --color-primary );
		}
	}
}
